<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./css/mj.css" rel="stylesheet" type="text/css"/>
</head>
<script src="./js/jquery.min.js"></script>
<!--<script src="./js/three.js"></script>-->
<script src="./js/vue.js"></script>
<style>
</style>
<body>


<div id="app">
    <div class="room">
        <div v-for="item in allMahjong">
            <div>
                {{item.username}}
            </div>
            <div style="display: flex">
                <div v-for="m in item.currentMahJong">
                    <div v-if="m.type==='TIAO'" :class="`t${m.value}`" @click="play(m)"></div>
                    <div v-if="m.type==='WAN'" :class="`w${m.value}`" @click="play(m)"></div>
                    <div v-if="m.type==='TONG'" :class="`tt${m.value}`" @click="play(m)"></div>
                </div>
            </div>

        </div>
        <input id="username" v-model="username" placeholder="输入名字连接云端房间">
        <button @click="join">加入获取发牌</button>
        <button @click="rest">重置房间</button>
    </div>

    <div>
        公告消息：
        <li v-for="(t) in tips">
            {{t}}
        </li>
    </div>
</div>
</body>
<script>
    var ws = null
    new Vue({
        el: '#app',
        data: function () {
            return {
                tips:[],
                allMahjong: [],
                username: ''
            }
        },
        methods: {
            connectRoom() {
                ws = new WebSocket('ws://127.0.0.1:8888/ws?username=' + $("#username").val());
                ws.onopen = function () {
                    console.log('ws连接状态：' + ws.readyState);
                }
                ws.onmessage = (data) => {
                    console.log('接收到来自服务器的消息：');
                    var parse = JSON.parse(data.data);
                    console.log(parse);
                    if (parse.type === 'DEAL') {
                        this.allMahjong.splice(0, this.allMahjong.length, ...(parse.msg))
                    } else  if (parse.type === 'TIPS')  {
                        this.tips.push(parse.msg)
                    }
                }

            },
            play(m) {
                for (let i = 0; i < this.allMahjong.length; i++) {
                    let allMahjongElement = this.allMahjong[i]
                    if (allMahjongElement.username === this.username) {
                        let deleteIndex = -1
                        for (let j = 0; j < allMahjongElement.currentMahJong.length; j++) {
                            let mj = allMahjongElement.currentMahJong[j]
                            if (mj == m) {
                                deleteIndex = j
                                break
                            }
                        }
                        if (deleteIndex > -1) {
                            allMahjongElement.currentMahJong.splice(deleteIndex, 1)
                        }
                    }
                }

                for (let allMahjongElement of this.allMahjong) {

                }
                console.log(m)
            },
            join() {
                if (ws == null) {
                    alert("你未加入房间了")
                    return
                }
                ws.send(JSON.stringify({type: "CONNECT", userId: this.username}));
            },
            rest() {
                $.get("/room/rest", (res) => {
                    console.log(res)
                })

            }
        },
        mounted: function () {
            console.log("加入房间")
            this.connectRoom()
        }
    })
</script>

</html>
